<script>
// 从后端数据组装出告警区域的数据
const getAlarmAreaFromRes = (info = {}) => {
  let wz = ''
  if (typeof info.imageAttributeJson === 'string') {
    wz = JSON.parse(info.imageAttributeJson || '{}')
  } else {
    wz = info.imageAttributeJson || {}
  }
  const event = wz.event ? wz.event : []
  const result = []
  event.forEach(item => {
    item.result.items.forEach(ele => {
      result.push({
        width: (ele.location.width * 100 / item.snapshot.width) + '%',
        height: (ele.location.height * 100 / item.snapshot.height) + '%',
        left: (ele.location.left * 100 / item.snapshot.width) + '%',
        top: (ele.location.top * 100 / item.snapshot.height) + '%'
      })
    })
  });
  return result
}
export default {
  props: {
    imgList: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      key: 0,
      handlerImg: []
    }
  },
  computed: {
    fmImageCfg() {
      const info = this.imgList[0]
      let res = [];
      if (info) {
        res = getAlarmAreaFromRes(info)
      }
      return res
    }
    // handlerImg() {
    //   return this.imgList.map(item => {
    //     const url = this.cfg.imageDomain + item.imageUrl
    //     this.addTextToImage(url, 'test', 0, 0, null, 'red', res => {
    //       console.log(res);
    //     })
    //     return url
    //   })
    // }
  },
  watch: {
    imgList: {
      handler(val) {
        this.handlerImg = []
        this.key = Math.random()
        const resultList = []
        val.map((item, i) => {
          const url = this.cfg.imageDomain + item.imageUrl
          this.addTextToImage({
            url, item, callback: res => {
              resultList[i] = res
              if (resultList.length === val.length) {
                this.handlerImg = resultList
                this.key = Math.random()
              }
            }
          })
        })
      },
      immediate: true,
      deep: true
    }
  },
  methods: {
    addTextToImage({ url, item, callback }) {
      const img = new Image();
      img.crossOrigin = 'anonymous'
      img.src = url;
      img.onload = function() {
        const canvas = document.createElement('canvas');
        canvas.width = img.width;
        canvas.height = img.height;
        const ctx = canvas.getContext('2d');
        ctx.drawImage(img, 0, 0);
        const borderList = getAlarmAreaFromRes(item)
        for (let i = 0; i < borderList.length; i++) {
          const ele = borderList[i]
          ctx.beginPath()
          ctx.lineWidth = 5
          ctx.strokeStyle = '#f00'
          ctx.strokeRect(parseInt(ele.left) / 100 * img.width, parseInt(ele.top) / 100 * img.height, parseInt(ele.width) / 100 * img.width, parseInt(ele.height) / 100 * img.height)
        }
        callback(canvas.toDataURL());
      };
    }
  }
}
</script>

<template>
  <div :key="key" class="image-with-border">
    <el-image
      v-if="handlerImg && handlerImg.length && handlerImg[0]"
      style="width: 100%; height: 100%"
      :src="handlerImg[0]"
      :preview-src-list="handlerImg"
    />
    <div v-for="(item,i) of fmImageCfg" :key="i" class="image-border" :style="item" />
  </div>
</template>


<style scoped lang="scss">
  .image-with-border {
    width: 790px;
    height: 100%;
    position: relative;
  }

  .image-border {
    position: absolute;
    border: 5px solid red;
  }
</style>
